<template>
  <div class="device-container">
    <el-card class="device-card">
      <div slot="header" class="card-header">
        <span class="card-title">
          <i class="el-icon-monitor"></i>
          设备列表
        </span>
        <el-button type="primary" size="small" @click="startScan" :loading="scanning">
          <i class="el-icon-refresh"></i>
          开始扫描
        </el-button>
      </div>

      <!-- 本地设备信息 -->
      <div class="local-device" v-if="localDevice">
        <div class="device-header">
          <i class="el-icon-s-platform"></i>
          <span>本地设备</span>
        </div>
        <el-card class="info-card" shadow="never">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">IP地址：</span>
                <el-tag type="success">{{ localDevice.ip }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">主机名：</span>
                <el-tag type="primary">{{ localDevice.hostname }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">操作系统：</span>
                <el-tag type="info">{{ localDevice.os }}</el-tag>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="info-item">
                <span class="info-label">状态：</span>
                <el-tag :type="localDevice.status === 'online' ? 'success' : 'danger'">
                  {{ localDevice.status === 'online' ? '在线' : '离线' }}
                </el-tag>
              </div>
            </el-col>
          </el-row>
        </el-card>

        <!-- 开放端口 -->
        <div class="ports-section">
          <div class="section-title">开放端口</div>
          <el-table :data="localDevice.open_ports.filter(port => port.status === 'open')" style="width: 100%" border>
            <el-table-column prop="port" label="端口" width="120">
              <template slot-scope="scope">
                <el-tag type="warning">{{ scope.row.port }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="service" label="服务" width="150">
              <template slot-scope="scope">
                <el-tag type="info">{{ scope.row.service }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === 'open' ? 'success' : 'danger'">
                  {{ scope.row.status === 'open' ? '开放' : '关闭' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 网络设备列表 -->
      <div class="network-devices">
        <div class="device-header">
          <i class="el-icon-connection"></i>
          <span>网络设备</span>
        </div>
        <el-table :data="networkDevices" style="width: 100%" border>
          <el-table-column prop="ip" label="IP地址" width="150">
            <template slot-scope="scope">
              <el-tag type="success">{{ scope.row.ip }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="mac" label="MAC地址" width="180">
            <template slot-scope="scope">
              <el-tag type="primary">{{ scope.row.mac || '未知' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="hostname" label="主机名" width="180">
            <template slot-scope="scope">
              <el-tag type="info">{{ scope.row.hostname || '未知' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 'online' ? 'success' : 'danger'">
                {{ scope.row.status === 'online' ? '在线' : '离线' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="vendor" label="厂商" width="150">
            <template slot-scope="scope">
              <el-tag type="warning">{{ scope.row.vendor || '未知' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="os" label="操作系统">
            <template slot-scope="scope">
              <el-tag type="info">{{ scope.row.os || '未知' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button type="text" @click="showPorts(scope.row)">
                查看端口
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 端口详情对话框 -->
    <el-dialog title="开放端口" :visible.sync="portsDialogVisible" width="500px">
      <el-table :data="selectedDevicePorts.filter(port => port.status === 'open')" style="width: 100%" border>
        <el-table-column prop="port" label="端口" width="120">
          <template slot-scope="scope">
            <el-tag type="warning">{{ scope.row.port }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="service" label="服务" width="150">
          <template slot-scope="scope">
            <el-tag type="info">{{ scope.row.service }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'open' ? 'success' : 'danger'">
              {{ scope.row.status === 'open' ? '开放' : '关闭' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getNetworkScan } from '@/api/opration'

export default {
  name: 'Device',
  data() {
    return {
      scanning: false,
      devices: [],
      portsDialogVisible: false,
      selectedDevicePorts: []
    }
  },
  computed: {
    localDevice() {
      return this.devices.find(device => device.type === 'local')
    },
    networkDevices() {
      return this.devices.filter(device => device.type === 'network')
    }
  },
  created() {
    this.fetchDevices()
  },
  methods: {
    async fetchDevices() {
      try {
        const response = await getNetworkScan()
        if (response && response.status === 'success') {
          this.devices = response.devices
        }
      } catch (error) {
        console.error('获取设备信息失败:', error)
        this.$message.error('获取设备信息失败')
      }
    },
    async startScan() {
      this.scanning = true
      try {
        await this.fetchDevices()
        this.$message.success('扫描完成')
      } catch (error) {
        this.$message.error('扫描失败')
      } finally {
        this.scanning = false
      }
    },
    showPorts(device) {
      this.selectedDevicePorts = device.open_ports
      this.portsDialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.device-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);

  .device-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .card-title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
        display: flex;
        align-items: center;

        i {
          margin-right: 8px;
          font-size: 18px;
          color: #409EFF;
        }
      }
    }
  }

  .local-device {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .device-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
      color: #303133;

      i {
        margin-right: 8px;
        font-size: 18px;
        color: #409EFF;
      }
    }
  }

  .network-devices {
    .device-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: bold;
      color: #303133;

      i {
        margin-right: 8px;
        font-size: 18px;
        color: #409EFF;
      }
    }
  }

  .ports-section {
    margin-top: 20px;

    .section-title {
      font-size: 14px;
      font-weight: bold;
      color: #606266;
      margin-bottom: 15px;
    }
  }

  .info-card {
    margin-bottom: 20px;
    background-color: #fafafa;
    border: 1px solid #ebeef5;

    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      
      .info-label {
        width: 100px;
        font-weight: bold;
        color: #606266;
      }
    }
  }

  ::v-deep .el-table {
    margin-bottom: 20px;
    .el-tag {
      display: inline-flex;
      align-items: center;
    }
  }
}
</style>
